<%@ page language="java" import="java.util.*,com.fescoservice.model.*" pageEncoding="UTF-8"%>

<%
	String langfilename = "/resources/message";
	Operator oper = (Operator)request.getAttribute("operator");
	String companyName = (String)request.getAttribute("companyName");
%>
<%@include file="../common/LocaleManager.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Fesco Service</title>
		<link rel="stylesheet" href="<%=path%>/js/jquery/themes/redmond/jquery.ui.all.css">
		<script src="<%=path%>/js/jquery/jquery-1.5.1.js"></script>
		<script src="<%=path%>/js/jquery/external/jquery.bgiframe-2.1.2.js"></script>
		<script src="<%=path%>/js/jquery/ui/jquery.ui.core.js"></script>
		<script src="<%=path%>/js/jquery/ui/jquery.ui.widget.js"></script>
		<script src="<%=path%>/js/jquery/ui/jquery.ui.datepicker.js"></script>		
		<script src="<%=path%>/js/jquery/ui/jquery.ui.mouse.js"></script>
		<script src="<%=path%>/js/jquery/ui/jquery.ui.button.js"></script>
		<script src="<%=path%>/js/jquery/ui/jquery.ui.draggable.js"></script>
		<script src="<%=path%>/js/jquery/ui/jquery.ui.position.js"></script>
		<script src="<%=path%>/js/jquery/ui/jquery.ui.resizable.js"></script>
		<script src="<%=path%>/js/jquery/ui/jquery.effects.core.js"></script>
		<script src="<%=path%>/js/jquery/ui/jquery.effects.slide.js"></script>
		<link rel="stylesheet" href="<%=path%>/css/demo.css">
		<link rel="stylesheet" href="<%=path%>/css/admin.css">
	
		<style type="text/css">

		</style>
		<script type="text/javascript">
			$(function() {
				
				function updateTips(tips,t) {
					tips.text(t).addClass("ui-state-highlight");
					setTimeout(function() {
						tips.removeClass("ui-state-highlight", 1500);
					}, 500);
				}
				function checkLength(o, n, min, max,tips) {
					if (o.val().length > max || o.val().length < min) {
						o.addClass("ui-state-error");
						updateTips(tips,'<%=resource.getString("FS_T_LENGTH")%> ' + n + ' <%=resource.getString("FS_T_BETWEEN")%> ' + min
								+ ' <%=resource.getString("FS_T_AND")%> ' + max + '<%=resource.getString("FS_T_DOT")%>');
						tips.show();
						return false;
					} else {
						o.removeClass("ui-state-error");
						tips.hide();
						return true;
					}
				}
				
				function checkRegexp(o,n,regexp,tips) {
					if (!(regexp.test(o.val()))) {
						o.addClass("ui-state-error");
						updateTips(tips,n);
						tips.show();
						return false;
					} else {
						o.removeClass("ui-state-error");
						tips.hide();
						return true;
					}
				}
				
				function checkDept() {
					var result;
					if ("0"==$('#operTypeS').val()){
						
						if ("0"!=$('#operRoleIn').val() && "ALL"==$('#operDeptS').val() ) {
							result= false;
							updateTips($('#operDeptTips'),"<%=resource.getString("FS_M_CHOOSEDEPT")%>");
						} else {
							result= true;
						}
					}else{
						
						if (""==$('#operCompanyIdInput').val() || "0"==$('#operCompanyIdInput').val() ) {
							result= false;
							updateTips($('#operCompanyTips'),"<%=resource.getString("FS_T_PLEASE")+resource.getString("FS_T_CHOOSECOMPANY")+resource.getString("FS_T_DOT")%>");
						} else {
							result= true;
						}
					}
					if (!result) {
							$('#operDeptS').addClass("ui-state-error");							
							$('#operDeptTips').show();
							return false;
						} else {
							$('#operDeptS').removeClass("ui-state-error");
							$('#operDeptTips').hide();
							return true;
						}
				}
				
				function checkPassword() {
				//	alert($('#operTypeS').val()+$('#operRoleIn').val()+$('#operDeptS').val());
					if ($('#password1').val() !=$('#password2').val() ) {
						$('#operDeptS').addClass("ui-state-error");
						updateTips($('#operPWTips'),"<%=resource.getString("FS_M_PASSWORDSAME")%>");
						$('#operDeptTips').show();
						return false;
					} else {
						$('#operDeptS').removeClass("ui-state-error");
						$('#operDeptTips').hide();
						return true;
					}
				}
				
				function checkOperIdExist() {
					var operId = $('#operIdInput').val();
					var repeatFlag =$.ajax({url:"<%=path%>/action/Manage.htm?cmd=checkOperatorId&time=<%=System.currentTimeMillis()%>&operId="+operId,async:false});
					//alert(repeatFlag.responseText);
					if("true"==repeatFlag.responseText){
						$('#operIdInput').addClass("ui-state-error");
						updateTips($('#operIdTips'),"<%=resource.getString("FS_M_OPEREXIST")%>");
						$('#operIdTips').show();
						return false;
					}else{
						$('#operIdInput').removeClass("ui-state-error");
						$('#operIdTips').hide();
						return true;
					}	
				}
				
				
				$("#btnPW").button().click(function() {
					$('#pwInput').show();		
				});
				$("#btnDel").button().click(function() {
					if(confirm("<%=resource.getString("FS_T_CONFIRMDELETE")%><%=resource.getString("FS_T_OPERATOR")%><%=resource.getString("FS_T_ASKSUFFIX")%>")){
					
						document.forms.mainForm.action = '<%=path%>/action/Manage.htm?cmd=deleteOperator';
						document.forms.mainForm.submit();		
					}
				});
				$("#btnSave").button().click(function() {
					var bValid = true;
					document.forms.mainForm.action = '<%=path%>/action/Manage.htm?cmd=saveOperator';
					<% if(null==oper.getOperId() || "".equals(oper.getOperId()) ){%>	
							bValid = bValid && 	checkOperIdExist();			
					<%}%>
					bValid = bValid && checkLength($('#operIdInput'),"<%=resource.getString("FS_T_USERNAME")%>",1,40,$('#operIdTips'));
					bValid = bValid && checkLength($('#operNameInput'),"<%=resource.getString("FS_T_ENGLISHNAME")%>",1,40,$('#operNameTips'));
					bValid = bValid && checkDept();
					bValid = bValid && checkLength($('#operEmailInput'),"<%=resource.getString("FS_T_EMAIL")%>",5,60,$('#operEmailTips'));
					bValid = bValid && checkLength($('#operTelInput'),"<%=resource.getString("FS_T_PHONE")%>",0,20,$('#operTelTips'));
					bValid = bValid && checkRegexp($('#operTelInput'),"<%=resource.getString("FS_M_TELFORMAT")%>",/[0-9]{3}[-]*[0-9]*/,$('#operTelTips'));
					bValid = bValid && checkLength($('#datepicker'),"<%=resource.getString("FS_T_BIRTH")%>",1,40,$('#operBirthTips'));
					bValid = bValid && checkPassword();
					if (bValid) {
						if("0"==$('#operTypeS').val()){
							document.forms.mainForm.operRoleId.value=$('#operRoleIn').val();
						}else{
							document.forms.mainForm.operRoleId.value=$('#operRoleOut').val();
						}
						document.forms.mainForm.submit();	
					}	
				});
				$("#btnBack").button().click(function() {
					document.forms.mainForm.action = '<%=path%>/action/Manage.htm?cmd=operatorlist';
					//document.forms.mainForm.type.value=""
					document.forms.mainForm.submit();		
				});
				
				$( "#datepicker" ).datepicker({
					changeMonth: true,
					changeYear: true
				 });
			
							
				
				$('#srchCompanyBtn').button().click(function (){					
					var compId = $('#operCompanyInput').val();
					$("#companyList").load("<%=path%>/action/Manage.htm?cmd=getCompanyList&name="+encodeURI(compId)+"&time=<%=System.currentTimeMillis()%>"); 
					$("#companyList")[0].style.display="";//.show();
					
				});
				
				
				<% if(null!=oper.getOperId() && !"".equals(oper.getOperId()) ){%>	
					$('#operTypeS').val("<%=oper.getOperType()%>");						
					$('#operIdInput').attr("readonly","readonly");
					$('#operIdInput').addClass("grey");
					<% if("1".equals(oper.getOperType())){%>
						$('#operDept').hide();
						$('#operRoleIn').hide();
						$('#operRoleOut').val("<%=oper.getOperRoleId()%>");
					<%}else{%>
						$('#operCompany').hide();
						$('#operRoleOut').hide();
						$('#operRoleIn').val("<%=oper.getOperRoleId()%>");
						$('#operDeptS').val("<%=oper.getOperDeptId()%>");	
				<%}}else{%>
					$('#operIdInput').blur( function(){
						<% if(null==oper.getOperId()|| "".equals(oper.getOperId()) ){%>	
							var f = checkOperIdExist();		
						<%}%>	
					});
					$('#operCompany').hide();
					$('#operRoleOut').hide();
					$('#btnDel').hide();
					$('#btnPW').hide();
				<%}%>
				$("#companyList")[0].style.display="none";//.hide();
				$('#pwInput').hide();
			});
			
			function setCompanyName() {
				var id =$("input[name='companyId']:checked").val();
				var companyName = document.forms.company['compName'+id].value;
				$("#operCompanyInput").val(companyName);
				$("#operCompanyIdInput").val(id);
				$("#companyList")[0].style.display="none";
			}
			function closeCompanyName() {
				$("#companyList")[0].style.display="none";//.show();
			}
			function changeType(value){
				if("0"==value){
					$('#operCompany').hide();
					$('#operRoleOut').hide();
					$('#operDept').show();
					$('#operRoleIn').show();
				}else{
					$('#operCompany').show();
					$('#operRoleOut').show();
					$('#operDept').hide();
					$('#operRoleIn').hide();
				}
			}
			function changeDept(value){
				if("0"==value){
					$('#operDept').hide();
				}else{
					$('#operDept').show();
				}
			}
		</script>
	</head>
	<body>
		
		<div class="wrapContent">	
			<div class="ui-widget">	
				<div class="ui-widget-header">
					<%=resource.getString("FS_T_ADD")%><%=resource.getString("FS_T_ADMIN")%>
				</div>
				<div class="ui-widget-content operatorForm">
					<form name="mainForm" method="post">
						<fieldset>
							<label for="operId">
								<%=resource.getString("FS_T_USERNAME")%>
							</label>
							<input type="text" name="operId" id="operIdInput" class=" ui-corner-all" value="<%=oper.getOperId() %>" maxlength="80" />
							<span id="operIdTips" ></span>
						</fieldset>
						<fieldset>
							<label for="operName">
								<%=resource.getString("FS_T_ENGLISHNAME")%>
							</label>
							<input id="operNameInput" type="text" name="operName" class=" ui-corner-all" value="<%=oper.getOperName() %>" maxlength="80" />				
							<span id="operNameTips" ></span>
						</fieldset>
						<fieldset>
							<label for="operType">
								<%=resource.getString("FS_T_OPERTYPE")%>
							</label>
							<select id="operTypeS" name="operType" onchange="changeType(this.value)" class=" ui-corner-all">
								<option value="0" ><%=resource.getString("FS_T_OPERTYPE0")%></option>
								<option value="1" ><%=resource.getString("FS_T_OPERTYPE1")%></option>
							</select>
						</fieldset>
						<fieldset>
							<label for="operRoleId">
								<%=resource.getString("FS_T_OPERROLE")%>
							</label>
							<input id="operRoleIdInput" type="hidden" name="operRoleId" value="<%=oper.getOperRoleId() %>" />
						
							<select id="operRoleIn" class=" ui-corner-all" >
								<option value="0"><%=resource.getString("FS_T_OPERROLE0")%></option>
								<option value="1"><%=resource.getString("FS_T_OPERROLE1")%></option>
								<option value="2"><%=resource.getString("FS_T_OPERROLE2")%></option>
							</select>
							<select id="operRoleOut" class=" ui-corner-all" >
								<option value="3"><%=resource.getString("FS_T_OPERROLE3")%></option>
								<option value="4"><%=resource.getString("FS_T_OPERROLE4")%></option>
							</select>
						</fieldset>
						<fieldset id="operCompany">
							<label for="operCompanyId">
								<%=resource.getString("FS_T_COMPANY")%>
							</label>
							<input id="operCompanyInput" type="text" name="operCompanyText" class=" ui-corner-all" value="<%=companyName %>"  maxlength="80" />
							<input id="operCompanyIdInput" type="hidden" name="operCompanyId" value="<%=oper.getOperCompanyId() %>" />
							<span id="srchCompanyBtn" ><%=resource.getString("FS_T_SEARCH")%></span>
							<span id="operCompanyTips" ></span>
						</fieldset>
						<fieldset id="operDept">
							<label for="operDeptId">
								<%=resource.getString("FS_T_DEPARTMENT")%>
							</label>
							<select id="operDeptS" name="operDeptId" class=" ui-corner-all" >
								<option value="ALL"><%=resource.getString("FS_T_ALL")%></option>
								<option value="1"><%=resource.getString("FS_T_DEPARTMENT1")%></option>
								<option value="2"><%=resource.getString("FS_T_DEPARTMENT2")%></option>
								<option value="3"><%=resource.getString("FS_T_DEPARTMENT3")%></option>
							</select>
							<span id="operDeptTips" ></span>
						</fieldset>
						<fieldset>
							<label for="operEmail">
								<%=resource.getString("FS_T_EMAIL")%>
							</label>
							<input id="operEmailInput" type="text" name="operEmail" class=" ui-corner-all" value="<%=oper.getOperEmail() %>" maxlength="60" />
							<span id="operEmailTips" ></span>
						</fieldset>
						<fieldset>
							<label for="operTel">
								<%=resource.getString("FS_T_PHONE")%>
							</label>
							<input id="operTelInput" type="text" name="operTel" class=" ui-corner-all" value="<%=oper.getOperTel() %>" maxlength="20" />
							<span id="operTelTips" ></span>
						</fieldset>
						<fieldset>
							<label for="operBirth">
								<%=resource.getString("FS_T_BIRTH")%>
							</label>
							<input id="datepicker" type="text" name="operBirth" class=" ui-corner-all" value="<%=oper.getOperBirth() %>" />
							<span id="operBirthTips" ></span>
						</fieldset>
						<fieldset id="pwInput">
							<label for="operPassword">
								<%=resource.getString("FS_T_PASSWORDINPUT1")%>
							</label>
							<input id="password1" type="password" name="operPassword1" class=" ui-corner-all" value="" maxlength="80" />
							<br/><br/>
							<label for="operPassword2">
								<%=resource.getString("FS_T_PASSWORDINPUT2")%>
							</label>
							<input id="password2" type="password" name="operPassword2" class=" ui-corner-all" value="" maxlength="80" />
							<span id="operPWTips" ></span>
						</fieldset>
					</form>
						
					<div class="clear"></div>
				</div>
						
					<div class="buttonGroupRight">
						<div id="btnBack" ><%=resource.getString("FS_T_LIST")%></div>
				   		<div id="btnSave" ><%=resource.getString("FS_T_SAVE")%></div>
				   		<div id="btnDel" ><%=resource.getString("FS_T_DELETE")%></div>
				   		<div id="btnPW" ><%=resource.getString("FS_T_RESET")%><%=resource.getString("FS_T_PASSWORD")%></div>
					</div>	
			</div>
		</div>
		<div id="companyList" >
		
		</div>
				
		
		<script type="text/javascript">	
		//import scripts below to pages which display in right frame, for ajust the scroll height	
		parent.scroll(0,0);
		parent.setFrameHeight(document.body.scrollHeight+200);
		</script>
	</body>
</html>